<template>
	<div class="page">
		<p class="title">
			基本用法 
		</p>
		<gr-slider v-model="num1" @change="onChange"/>
		<div>当前值：{{num1}}</div>
		
		<p class="title">
			指定数值范围（500~1000）
		</p>
		<gr-slider v-model="num2" :min="500" :max="1000" @change="onChange"/>
		<div>当前值：{{num2}}</div>
		
		<p class="title">
			指定步长（10）
		</p>
		<gr-slider v-model="num3" :step="10" @change="onChange"/>
		<div>当前值：{{num3}}</div>
		
		<p class="title">
			自定义样式
		</p>
		<gr-slider v-model="num4" bgColor="#f40" @change="onChange">
			<template slot="button">
				<div class="my-btn">{{num4}}</div>
			</template>
		</gr-slider>
		<div>当前值：{{num4}}</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				num1: 50,
				num2: 666,
				num3: 0,
				num4: 30
			}
		},
		methods: {
			onChange(val) {
				console.log(val);
			}
		}
	}
</script>

<style lang="scss">
	html {
		background-color: white;
	}
	.page {
		user-select: none;
		padding: 0 14px;
	}
	.my-btn {
		display: inline-block;
		width: 20px;
		height: 16px;
		line-height: 16px;
		text-align: center;
		padding: 3px 6px;
		background-color: #f40;
		border-radius: 4px;
		color: white;
		font-size: 12px;
	}
</style>
